CGSGNodeSprite Class
A CGSGNodeSprite represent an animated sprite, with all animations in the image
Constructor
Item Index
Methods
- _checkDimension
- _clearContext
- _createDelegate
- _getSlice
- _onImageError
- _onImageLoaded
- addAnimation
- addChild
- addChildAt
- afterRender
- afterRenderGhost
- beforeRender
- beforeRenderGhost
- computeAbsoluteMatrix
- copy
- detachChild
- detachChildAt
- detectSelection
- detectSelectionInRegion
- evalSet
- free
- getAbsoluteBottom
- getAbsoluteHeight
- getAbsoluteLeft
- getAbsolutePosition
- getAbsoluteRegion
- getAbsoluteRight
- getAbsoluteRotation
- getAbsoluteScale
- getAbsoluteTop
- getAbsoluteWidth
- getHeight
- getListOfCollidingBrothers
- getRegion
- getWidth
- goToFirstFrame
- goToLastFrame
- goToNextFrame
- goToPreviousFrame
- isALeaf
- isColliding
- isCollidingABrother
- pickNode
- pickNodes
- play
- removeAll
- removeChild
- render
- renderGhost
- renderSelected
- reset
- resizeBy
- resizeTo
- resizeWith
- rotateBy
- rotateTo
- rotateWith
- scaleBy
- scaleTo
- scaleWith
- setImage
- setRegionConstraint
- setSelected
- stop
- translateBy
- translateTo
- translateWith
Properties
- _absolutePosition
- _absoluteRotation
- _absoluteScale
- _context
- _currentFrame
- _currentLoop
- _id
- _img
- _isDrag
- _isLoaded
- _isPlaying
- _numberOfLoops
- _parentNode
- _tmpCanvas
- _urlImage
- children
- classType
- currentAnimation
- dimension
- globalAlpha
- isClickable
- isCollisionManaged
- isDraggable
- isMouseOver
- isMoving
- isProportionalResize
- isResizable
- isResizing
- isSelected
- isTraversable
- isVisible
- listAnimations
- name
- needToKeepAbsoluteMatrix
- onAnimationEnd
- onAnimationStart
- onClick
- onDblClick
- onDeselect
- onDrag
- onDragEnd
- onLoadEnd
- onMouseEnter
- onMouseOut
- onMouseOver
- onMouseUp
- onResize
- onResizeEnd
- onSelect
- pickNodeMethod
- position
- regionConstraint
- resizeHandles
- rotation
- rotationCenter
- scale
- selectionHandleColor
- selectionHandleSize
- selectionLineColor
- selectionLineWidth
- userdata
Methods
Check the true dimension of the image and fill the this.dimension property with it, only if dimension is not already defined in the constructor
-
context -
canvasWidth -
canvasHeight
Wipes the canvas context
-
objectContext -
delegateMethod
Used to call delegate method when the image is finally loaded
-
frame -
animation
Return position x and y in the image for the slice of the animation and frame passed in parameter.
To be overrided when the image failed to load
fired when the image is loaded. Check the dimension of the image and fired the onLoadEnd event
-
name -
speed -
frames -
sliceX -
sliceY -
width -
height -
framesPerLine
Add an animation for this sprite
-
nameStringName for this animation
-
speedNumberNumber of frames between 2 steps
-
framesNumberNumber of frame for this animation
-
sliceXNumberslice position inside the image for this animation
-
sliceYNumberslice position inside the image for this animation
-
widthNumberwidth of 1 frame
-
heightNumberheight of 1 frame
-
framesPerLineNumberNumber of frames per line in the image
-
newNode
Add a new nodes into this one, at the end of the list
-
newNodeCGSGNodethe nodes to add as a child
-
newNode -
index
Add a new nodes at a particular index in the list of children. If the index is too large, the nodes will be inserted at the end of the list
-
context
Must be called after a render
-
contextCanvasRenderingContext2Dthe context into render the nodes
-
context
Must be called before begin to render
-
contextCanvasRenderingContext2Dthe context into render the nodes
-
context
Must be called before to start the rendering of the nodes
-
contextCanvasRenderingContext2Dthe context into render the nodes
-
context
Must be called before begin to render the nodes in GHOST mode
-
contextCanvasRenderingContext2Dthe context into render the nodes
-
recursive
Compute the absolute position, rotation and scale in the canvas container
-
recursiveBooleanif !== false, compute recursively
-
childNode
Detach the nodes without delete it. So it's not a child anymore
-
childNodeCGSGNode
-
index
Detach the nodes in index 'index' without delete it. So it's not a child anymore
-
indexNumber
-
mousePosition -
ghostContext -
absoluteScale
return this if this nodes is under the mice cursor Can be overrided by inherited klass to optimize this perform. This default function used the ghost rendering method
-
mousePositionCGSGPositionA CGSGPosition object
-
ghostContextCanvasRenderingContext2D -
absoluteScaleCGSGScale
-
region -
ghostContext -
absoluteScale
return this if this nodes is under the region Can be overrided by inherited klass to optimize this perform. This default function used the ghost rendering method
-
regionCGSGRegionThe region to check
-
ghostContextCanvasRenderingContext2D -
absoluteScaleCGSGScale
-
attribute -
value
Execute/Eval the script passed in parameter in "this" scope. Used to set new value to an attribute of a node
-
attributeStringThe attribute to be changed
-
valueThe new value for the attribute
node.evalSet("position.y", 12);
free memory taken by this object and it's children. The 'userData' property won't be freed
-
threshold
-
thresholdNumberspace between the 2 nodes before considering they are colliding
Go to the first frame of the current loop
Go to the last frame of the current loop
Go to the next frame of the current animation
Go to the previous frame of the current animation
Return true if this nodes has no child
-
node -
threshold
Test if this node is colliding the node in parameter. Don't forget to add nodes to CGSGCollisionManager.
-
threshold
-
thresholdNumberspace between the 2 nodes before considering they are colliding
-
mousePosition -
absoluteScale -
ghostContext -
recursively -
condition
Check if this nodes is under the cursor position.
-
mousePositionCGSGPositionposition of the mouse on the canvas
-
absoluteScaleCGSGScalea CGSGScale absolute relativeScale of all parents
-
ghostContextCanvasRenderingContext2Da copy of the canvas context
-
recursivelyBooleanif false, don't traverse the children of this nodes
-
conditionFunctionCondition to be picked ie: "color=='yellow'" or "classType=='CGSGNodeImage' && this.globalAlpha>0.5"
-
region -
absoluteScale -
ghostContext -
recursively -
condition
Return all nodes (Array) in the given region
-
regionCGSGRegionof the canvas to check
-
absoluteScaleCGSGScalea CGSGScale absolute relativeScale of all parents
-
ghostContextCanvasRenderingContext2Da copy of the canvas context
-
recursivelyBooleanif false, don't traverse the children of this nodes
-
conditionFunctionCondition to be picked ie: "color=='yellow'" or "classType=='CGSGNodeImage' && this.globalAlpha>0.5"
-
animationName -
loop
Start an animation
remove all children, delete them and reset the current parameters
-
node -
searchRecursively
Remove the child passed in parameter and delete it
-
context
Must be defined to allow the scene graph to render the image nodes
-
contextCanvasRenderingContext2Dthe context to render on
-
ghostContext
Empty ghost rendering function. Render here your custom nodes with a single color (cgsgGhostColor). This will be used by the SceneGraph to know if the mouse cursor is over this nodes.
-
ghostContextObjectThe context for the ghost rendering
-
context
Render the selection box and handle boxes around the bounding box of this node when selected
-
contextCanvasRenderingContext2Dthe context into render the node
return to the first frame of the first loop of the current animation
-
widthFactor -
heightFactor
Multiply current dimension by these new ones
-
newWidth -
newHeight
Replace current dimension by these new ones
-
width -
height
Increase/decrease current dimension with adding values
-
rotateFactor -
computeAbsoluteValue
Multiply this relativeScale factor by the current relative relativeScale
-
newAngle -
computeAbsoluteValue
Replace current relative relativeRotation by this new oneScale
-
angle -
computeAbsoluteValue
Add this angle to the current relative relativeRotation
-
scaleFactorX -
scaleFactorY -
computeAbsoluteValue
Multiply this relativeScale factor by the current relative relativeScale
-
scaleX -
scaleY -
computeAbsoluteValue
Replace current relative relativeScale by this new one
-
x -
y -
computeAbsoluteValue
Add to the current relative Scale
-
newImage
Set the image for this animated sprite.
-
newImageImagenew Image object. Must be an already loaded one
this.pingoo = new CGSGNodeSprite(60, 60, null, this.context); this.pingoo.isDraggable = true; //name, speed, frames, sliceX, sliceY, width, height, framesPerLine this.pingoo.addAnimation("front", 6, 4, 476, 0, 34, 34, 4); this.pingoo.play("front", null);
//now, load the image containing the sprite sheet. //The affectation to the sprite will be done in the loaded handler function this.spriteSheet = new Image(); this.spriteSheet.onload = this.onImageLoaded(); this.spriteSheet.src = "images/board.png";
onImageLoaded : function () { this.pingoo.setImage(this.spriteSheet); this.numbers.setImage(this.spriteSheet); this.water.setImage(this.spriteSheet); }
-
region
Set the region inside which one this node ca be placed an can move
-
regionCGSGRegiona CGSGRegion relatively to this parent region. Can be null.
Stop the current animation and stay on the current frame
-
x -
y -
computeAbsoluteValue
Add new coordinate to the current relative one
-
newRelativeX -
newRelativeY -
computeAbsoluteValue
Replace current relative position by this new one
Properties
Absolute position of this nodes on the canvas container. Generated value. Don't modify it manually Never use it to move the node, use translateBy/translateWith/translateTo instead
Absolute rotation of this nodes on the canvas container. Generated value. Don't modify it manually Never use it to rotate or resize the node, use rotateBy/rotateWith/rotateTo instead
Absolute scale of this nodes on the canvas container. Generated value. Don't modify it manually Never use it to scale the node, use scaleBy/scaleWith/scaleTo instead
ID for the node. Should be filled by the developer. The framework will never use it.
The image object itself
Number of loops for the current animation. if -1 then it's an infinite loop.
Fake canvas to pre-render the animated sprite (not used yet) Still beta
Dimension of this nodes on the canvas container Never use it to resize the node, use resizeBy/resizeWith/resizeTo instead
Default: CGSGDimension(0, 0)
selection attributes If true, this node is clickable and so will be checked by the pickNode function
Default: true
Updated by the scene itself. Don't update it manually. True if the mice is over the node, false otherwise
Updated by the scene itself. Don't update it manually. True if the node is being moved manually, false otherwise
If true, this node can be resized by the user. In that case, the dimension property will be affected, not the scale one.
Default: false
Updated by the scene itself. Don't update it manually. True if the node is being resized manually, false otherwise
Indicate whether this node is selected or not. Use CGSGScene::scenegraph.selectNode(nodeToSelect) to select a node
Default: false
true if this node is traversable (recursively) (ie : by the picknode, a traverser, ...)
If true, the absolute matrix will be recomputed after each movement (and so in animation). Set it to false to gain performance if you don't need to keep trace of absolute position (no need to collision, picknode, ...)
Default: true
Callback on mouse or touch click
Default: null
this.onClick = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on mouse or touch double click
Default: null
this.onDblClick = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on deselect this node
Default: null
this.onDeselect = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on drag this node
Default: null
this.onDrag = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on end of drag this node
Default: null
this.onDragEnd = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on mouse enter on the node
Default: null
this.onMouseEnter = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on mouse out
Default: null
this.onMouseOut = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on mouse over the node
Default: null
this.onMouseOver = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on mouse up
Default: null
this.onMouseUp = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on resize this node
Default: null
this.onResize = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on end resize this node
Default: null
this.onResizeEnd = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on select this node
Default: null
this.onSelect = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Define the method the detection (or "pick") method will be used for this node. Possible values CGSGPickNodeMethod.REGION and CGSGPickNodeMethod.GHOST.
- REGION : the detection returns true if the mouse cursor is inside the bounding box of the node
- GHOST : the detection will use the "renderGhost" method of the node to achieve a more accurate detection
Default: CGSGPickNodeMethod.REGION
Relative position of this nodes on the canvas container, relatively to the position of its parent node. Never use it to move the node, use translateBy/translateWith/translateTo instead
Default: CGSGPosition(0, 0)
The constraint region when moving the node
Default: null
The 8 handleboxes that will be the resize handles the resize handles will be in this order: 0 1 2 3 4 5 6 7
Relative rotation of this nodes on the canvas container, relatively to the rotation of its parent node. Never use it to rotate or resize the node, use rotateBy/rotateWith/rotateTo instead
Default: CGSGRotation(0)
Pivot point to apply a rotation. The point is a value between [0, 0] and [1, 1]. [0, 0] is the top left corner of the bounding box and [1, 1] the bottom right corner.
Default: null
Relative scale of this nodes on the canvas container, relatively to the scale of its parent node. Never use it to scale or resize the node, use scaleBy/scaleWith/scaleTo instead
Default: CGSGScale(1, 1)
Color for the handle boxes around this node when selected
Default: "#9068FF""
can be fulfilled by the developer to put in whatever he needs
Default: null